<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column label="Order_No" min-width="200">
      <template slot-scope="scope">{{ scope.row.order_no | orderNoFilter }}</template>
    </el-table-column>
    <el-table-column label="Price" width="195" align="center">
      <template slot-scope="scope">¥{{ scope.row.price | toThousandFilter }}</template>
    </el-table-column>
    <el-table-column label="Status" width="100" align="center">
      <template slot-scope="{row}">
        <el-tag :type="row.status | statusFilter">{{ row.status }}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    },
    orderNoFilter(str) {
      return str.substring(0, 30)
    }
  },
  data() {
    return {
      list: [
        {
          order_no: 'ffAe8ecd-Db5f-7f4d-0279-AAb52C',
          price: 6651.3,
          status: 'pending'
        },
        {
          order_no: '8e7bc74C-AEC6-1A4f-3Dde-5eEFEd',
          price: 4736.6,
          status: 'pending'
        },
        {
          order_no: 'C4DdE63c-5b7D-A741-6Fe9-1B39fc',
          price: 8168,
          status: 'success'
        },
        {
          order_no: 'Fbb0678c-cbfb-f24B-6DfA-d1c1C6',
          price: 3729.2,
          status: 'pending'
        },
        {
          order_no: 'fA182B1D-d850-7AF0-c78f-A8a71b',
          price: 12455,
          status: 'pending'
        },
        {
          order_no: 'c139BdC0-E520-45bF-f72f-5a2A83',
          price: 8245.55,
          status: 'success'
        },
        {
          order_no: 'df8C8Eb1-07Bc-7fd8-ddB3-6D6dC1',
          price: 6792.5,
          status: 'success'
        },
        {
          order_no: '22dC6D48-dd39-bf5A-f29e-059aCb',
          price: 11027.4,
          status: 'pending'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-table
  min-height 0
>>> .el-table__row
  td
    padding 10px 0
>>> .el-table__header
  th
    padding 10px 0
>>> .el-tag
  height 28px
  line-height 26px
</style>
